<template>
  <!--学习记录-->
  <div class="learningRecords">
    <div class="titleDiv clearFloat">
      <p class="lf">学习记录</p>
      <div v-for="(item,index) in learningRecordsTitle" :key="index" :class="index===clickIndex?'lf active':'lf'" @click="clickTab(index)">
        {{item}}
      </div>
      <!--<div class="rf pageDiv">-->
        <!--<i class="el-icon-arrow-left lf"></i>-->
        <!--<i class="el-icon-arrow-right lf"></i>-->
      <!--</div>-->
      <!--分页器-->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-size="6"
        layout="total, prev, pager, next"
        :total="pagination.total"
        prev-text="上一页"
        next-text="下一页"
        style="float: right;margin: 12px 30px 0 0">
      </el-pagination>
    </div>
    <div class="contentDiv">
      <div v-for="(item,index) in list" class="listDiv lf" :key="index">
        <img v-if="item.fileUrl" :src="$store.state.prefixImg + item.fileUrl" class="lf">
        <img v-else-if="item.liveFileUrl" :src="$store.state.prefixImg + item.liveFileUrl" class="lf">
        <img v-else :src="require('@/assets/images/home/tu1.png')" class="lf">
        <div class="lf">
          <p>{{item.courseName || item.liveName}}</p>
          <div class="clearFloat timeDiv">
            <i class="el-icon-time lf"></i>
            <span class="lf">上次观看：{{item.watchTime || item.time}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {queryLearnCourse,queryLearnLive} from '@/request/api'
  export default {
    name: 'myCourse',
    data () {
      return {
        learningRecordsTitle:["课程","直播"],
        clickIndex:0,
        list: [],
        /*   -------分页-------- */
        pagination: {
          currentPage: 1,//当前页
          total: 0//共多少条
        },
      }
    },
    mounted() {
        this.getList1()
    },
    methods: {
      getList1() {
        const loading = this.openLoading();
        var params = {
          "_search": true,
          "bgTm": "",
          "data": {
            "userId": JSON.parse(localStorage.getItem('userInfo')).id
          },
          "endTm": "",
          "pageNumber": this.pagination.currentPage,
          "pageSize": 20
        }
        queryLearnCourse(params).then(res=> {
          if(res.code == 200) {
            this.list = res.data.records
            this.pagination.total = res.data.total
            if(this.list.length!=0) {

            }else {
              this.$message({
                message: '暂无记录',
                type: 'warning',
                offset: '500'
              });
            }
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      getList2() {
        const loading = this.openLoading();
        var params = {
          "_search": true,
          "bgTm": "",
          "data": {
            "userId": JSON.parse(localStorage.getItem('userInfo')).id
          },
          "endTm": "",
          "pageNumber": this.pagination.currentPage,
          "pageSize": 20
        }
        queryLearnLive(params).then(res=> {
          if(res.code == 200) {
            this.list = res.data.records
            this.pagination.total = res.data.total
            if(this.list.length!=0) {

            }else {
              this.$message({
                message: '暂无记录',
                type: 'warning',
                offset: '500'
              });
            }
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      toPath() {
        this.$router.push({
          name:'seriesInfo'
        })
      },
      onImgError (item, $event) {
//        console.log(item, $event)
      },
      //      换页
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        if(this.clickIndex == 0) {
          this.getList1()
        }else {
          this.getList2()
        }
      },
      clickTab(index){
        this.clickIndex = index;
        this.pagination.currentPage = 1
        if(index == 0) {
          this.getList1()
        }else {
          this.getList2()
        }
      }
    }
  }
</script>

<style scoped>
  li {
    list-style: none
  }
  p,ul{
    margin:0;
  }
  .titleDiv{
    width:100%;
    height:60px;
    border-bottom:1px solid #E5E5E5;
  }
  .titleDiv p{
    font-size:20px;
    color:#343434;
    font-weight: bold;
    height:60px;
    line-height:60px;
    padding-left:54px;
    box-sizing: border-box;
    position: relative;
    margin-right:60px;
  }
  .titleDiv p:before{
    content: "";
    position: absolute;
    width: 4px;
    height: 24px;
    background: #22944E;
    top: 20px;
    left: 27px
  }
  .ques-card-num img{
    width:100%;
    height:auto;
    display:block;
    border:none;
  }
  .ques-card-tag span{
    line-height: 17px;
    display: inline-block;
    max-width: 84px;
    height: 18px;
    padding: 0 6px;
    color: #fa9600;
    border: 1px solid #f5cc84;
    border-radius: 2px;
    margin: 0 4px;
  }
  .ques-section-item+.ques-section-item {
    margin-left: 20px;
  }

  .ques-card-list li{
    position: relative;
  }


  .ques-list-image img{
    border-radius: 100%;
    width:100%;
    height:auto;
    display:block;
    border:none;
  }

  .integrals-c:last-child,.ques-card-list li:last-child .ques-list-box{
    border-bottom: 0;
  }
  .integrals-c img {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    vertical-align: middle;
    border-radius:50%;
  }
  .learningRecords{
    width:1200px;
    height:501px;
    background:#fff;
    margin:20px 0 20px 0;
  }
  .learningRecords .titleDiv div{
    line-height: 60px;
    font-size: 16px;
    font-weight: bold;
    color: #9A9A9A;
    margin-right:40px;
    cursor:pointer;
  }
  .learningRecords div.active{
    color: #22944E;
  }
  .learningRecords .contentDiv{
    width:100%;
    height:calc( 100% - 60px );
    padding:20px 30px;
    box-sizing: border-box;
  }
  .learningRecords .contentDiv .listDiv{
    width:calc( (100% - 40px)/2 );
    height:120px;
    margin-bottom:20px;
    border: 1px solid #E5E5E5;
    box-sizing: border-box;
    cursor:pointer;
  }
  .learningRecords .contentDiv .listDiv>div{
    padding:20px 0 0 20px;
    box-sizing: border-box;
  }
  .learningRecords .contentDiv .listDiv img{
    width: 150px;
    height: 118px;
  }
  .learningRecords .contentDiv .listDiv p{
    font-size: 20px;
    font-weight: bold;
    color: #343434;
    margin-bottom:35px;
  }
  .learningRecords .contentDiv .listDiv .timeDiv{
    font-size: 16px;
    color: #9A9A9A;
  }
  .learningRecords .contentDiv .listDiv .timeDiv /deep/ .el-icon-time{
    margin: 2px 10px 0 0;
    font-size: 18px;
  }
  .learningRecords .contentDiv .listDiv:nth-child(odd){
    margin-right:40px;
  }
  .pageDiv{
    width:80px;
    height:30px;
    border:1px solid #13893E;
    border-radius:4px;
    cursor:pointer;
    margin:15px 30px 0 0 !important;
  }
  .pageDiv i{
    width:40px;
    height:30px;
    line-height:30px;
    text-align: center;
  }
  .pageDiv /deep/ .el-icon-arrow-left{
    color:#13893E;
    font-weight: bold;
    background:#fff;
    border-radius:4px 0 0 4px;
  }
  .pageDiv /deep/ .el-icon-arrow-right{
    color:#fff;
    font-weight: bold;
    background:#13893E;
    border-radius:0 4px 4px 0;
  }
</style>
